<template>
  <el-card>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="120" />
      <el-table-column
        label="名称"
        show-overflow-tooltip
        width="150px"
        prop="skuName"
      ></el-table-column>
      <el-table-column
        label="描述"
        show-overflow-tooltip
        width="150px"
        prop="skuDesc"
      ></el-table-column>
      <el-table-column label="图片" width="150px">
        <template #="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="重量"
        width="150px"
        prop="weight"
      ></el-table-column>
      <el-table-column
        label="价格"
        width="150px"
        prop="price"
      ></el-table-column>
      <el-table-column label="操作" width="250px" fixed="right">
        <template #="{ row, $index }">
          <el-button
            type="primary"
            size="small"
            :icon="row.isSale == 1 ? 'Bottom' : 'Top'"
            @click="updateSale(row)"
            v-aclRole="{ btn: 'btn.Sku.updown' }"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="updateSku"
            v-aclRole="{ btn: 'btn.Sku.update' }"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="InfoFilled"
            @click="findSku(row)"
          ></el-button>
          <el-popconfirm
            :title="`你确定要删除${row.skuName}?`"
            width="200px"
            @confirm="removeSku(row.id)"
            v-aclRole="{ btn: 'btn.Sku.delete' }"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 12px"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 7, 9]"
      :small="false"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { reqSkulist, reqRemoveSku, reqCancelSale, reqSaleSku } from "@/api/sku";
import { SkuData, SkuResponseData } from "@/api/sku/type";
const scene = ref<number>(0);
const page = ref<number>(1);
const pageSize = ref<number>(3);
const total = ref<number>(0);
const tableData = ref<SkuData[]>([]);

const handleSizeChange = (e: number) => {
  pageSize.value = e;
  getHasSkulist();
};
const handleCurrentChange = (e: number) => {
  page.value = e;
  getHasSkulist();
};
const handleClick = () => {
  console.log("click");
};
const getHasSkulist = async () => {
  const result: SkuResponseData = await reqSkulist(page.value, pageSize.value);
  if (result.code == 200) {
    total.value = result.data.total;
    tableData.value = result.data.records;
  }
};
//更新已有的SKU
const updateSku = () => {
  ElMessage({ type: "success", message: "程序员在努力的更新中...." });
};
//删除某一个已有的商品
const removeSku = async (id: number) => {
  // //删除某一个已有商品的情况
  let result: any = await reqRemoveSku(id);
  if (result.code == 200) {
    //提示信息
    ElMessage({ type: "success", message: "删除成功" });
    //获取已有全部商品
    getHasSkulist();
  } else {
    //删除失败
    ElMessage({ type: "error", message: "系统数据不能删除" });
  }
};
//商品的上架与下架的操作
const updateSale = async (row: SkuData) => {
  //如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架
  //否则else情况与上面情况相反
  if (row.isSale == 1) {
    //下架操作
    await reqCancelSale(row.id as number);
    //提示信息
    ElMessage({ type: "success", message: "下架成功" });
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSkulist();
  } else {
    //下架操作
    await reqSaleSku(row.id as number);
    //提示信息
    ElMessage({ type: "success", message: "上架成功" });
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSkulist();
  }
};
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
  ElMessage({ type: "success", message: "程序员在努力的更新中...." });
};
onMounted(() => {
  getHasSkulist();
});
</script>

<style scoped lang="scss"></style>
